<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app"></div>
    <script src="vue.js"></script>
    <script>
        //1.子对父同信
        //利用this.$emit("send",'i am from child')，进行子对父组件的通信
        //将send方函数露出去，父组件接受函数进行处理

        //2.父对子通信
        //在子组件定义一个props:['sendchild']属性，父组件传入一个动态的参数
        // {msg:'i am from father'} 给，sendchild这个属性

        var son={

            methods:{
                sendtofather:function () {
                   this.$emit("send",'i am from child');
                }
            },
            template:`
            <div>

            <div>i am son  {{sendchild}}</div>
            <button @click="sendtofather">click  send  to father</button>
            </div> 
            
            `,
            props:['sendchild'],

            

        }
        var parent={
            
            methods:{
                receive:function(val){
                    console.log(val);
                }
            },
            components:{
                son 
            },

            template:`<div>i am parent
                <son :sendchild="msg" @send='receive'></son>
                
                </div>`,
                data:function(){
                    return {msg:'i am from father'}
                }
           

        }

        new Vue({
            el:'#app',
            components:{
                parent
            },
            template:`
            <div>
                <parent>  </parent>
            </div>
            
            `,
            data:{},

        })

    </script>
</body>
</html>